<template>
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="20%"
  :close-on-click-modal="false"
  :before-close="handleClose">
    <el-form :model="catalogForm" ref="catalogForm" :rules="rules" label-width="80px">
      <el-form-item label="名称:" prop="catalogName">
        <el-input v-model="catalogForm.catalogName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="排序值:">
        <el-input v-model.number="catalogForm.sort" placeholder="请输入排序值"/>
      </el-form-item>
      <el-form-item label="启用状态">
        <EnabledSwitch :value.sync="catalogForm.isEnabled"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import EnabledSwitch from '@/components/EnabledSwitch/index.vue'

import { goodsCatalogAdd, goodsCatalogEdit, goodsCatalogDetail } from '@/api/goods-catalog'

export default {
  name: 'AddCatalog',
  components: {
    EnabledSwitch
  },
  props: {
    rowId: {
      type: Number,
      default: ()=> null
    },
    title: {
      type: String,
      default: ()=> null
    },
    showDialog: {
      type: Boolean,
      default: ()=> false
    },
    parentId: {
      type: Number,
      default: ()=> null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.showDialog
      }
    }
  },
  watch: {
    rowId: {
      handler(val) {
        if(!val) return

        this.loadDetail(val)
      }
    }
  },
  created() {
    this.catalogForm = { ...this.initForm }
  },
  data() {
    return {
      catalogForm: null,
      initForm: {
        id: null,
        parentId: 0,
        catalogName: '',
        sort: 100,
        isEnabled: 1
      },
      rules:{
        catalogName: [ { required: true, message: '请输入名称', trigger: 'blur, change' }]
      },
      loading: false
    }
  },
  methods: {
    // 加载详情
    async loadDetail(rowId) {
      const res = await goodsCatalogDetail(rowId)
      if(!res.data) this.handleClose()
      this.catalogForm = res.data
    },

    // 关闭
    handleClose() {
      this.$emit('update:showDialog', false)
      this.$emit('update:parentId', null)
      this.$emit('update:rowId', null)
      this.$emit('update:title', null)
      this.loading = false
      this.catalogForm = { ...this.initForm }
      this.$refs.catalogForm.resetFields()
    },

    // 提交数据
    confirm(){
      this.$refs.catalogForm.validate(async (valid) => {
        if (valid) {
          try{
            this.loading = true
            if(this.parentId && this.parentId > 0) this.catalogForm.parentId = this.parentId
            if(!this.rowId){
              await goodsCatalogAdd(this.catalogForm)
            this.handleClose()
            }else {
              await goodsCatalogEdit(this.catalogForm)
              this.handleClose()
            }
            this.$emit('reloadData')
          }catch(e) {
            this.loading = false
          }
        } else {
          console.log('error submit!!');
          this.loading = false
          return false;
        }
      });
    }
  }
}
</script>